<template>
  <div class="content" :class="{ black: isblack == true }">
    <div class="content-item" v-for="(c, i) in content" :key="c.id">
      <div class="bg" v-if="i == 0">
        <transition name="left">
          <img :src="c.bg_img ? c.bg_img : ''" />
        </transition>
        <transition-group name="scroll">
          <div class="bg-top" v-show="scrollFlag" :key="c.id">
            <div class="chuan">
              <span
                class="returnroute"
                :class="{ active: night == true }"
                @click="returnroute"
                >x</span
              >
              <div class="title" :class="{ active: night == true }">
                {{ author }}
              </div>
            </div>

            <div class="mulu" @click="returnroute">目录</div>
            <div class="bgaudio" @click.prevent="play">
              {{ text }}
              <audio ref="audio" :src="c.bg_audio" loop autoplay></audio>
            </div>
            <div
              class="control"
              @click.prevent="display"
              :class="{ anmiadrop: show == true }"
            >
              =
            </div>
            <transition name="drop">
              <div class="seting" v-show="show">
                <div class="night" @click.stop="nightchange">夜间模式</div>
                <div class="catoon" v-if="count > 1" @click.stop="getcatoon">
                  {{ catext }}
                </div>
              </div>
            </transition>
          </div>
        </transition-group>
      </div>
    </div>
    <RunStory :roleList="content" @scrollFlag="scroll" :author="this.author" />
    <BoTtomNav
      :likecount="contentList.fav_count > 99 ? 99 : contentList.fav_count"
      :takeconut="contentList.has_avatar"
      :isblack="isblack"
    />
  </div>
</template>
<script>
import BoTtomNav from "./BoTtomNav.vue";
import RunStory from "./RunStory.vue";
export default {
  components: { BoTtomNav, RunStory },
  data() {
    return {
      text: "暂停",
      flag: true,
      show: false,
      night: false,
      scrollFlag: true,
      author: null,
      isblack: false,
      contentList: [],
      count: "",
      catext: "",
      id: 0,
    };
  },
  created() {
    this.goau();

    let catoonList = localStorage.catoonList
      ? JSON.parse(localStorage.catoonList)
      : [];
    let result = catoonList.find((c) => c.storyId == this.id);
    // console.log(this.id);
    if (!result) {
      this.catext = "未收藏";
      console.log(2);
    } else {
      this.catext = "已收藏";
      console.log(1);
    }
  },
  props: {
    content: Array,
  },
  watch: {
    content() {
      this.contentList = this.content[0];
      // console.log(this.contentList);
    },
  },
  methods: {
    getcatoon() {
      let storyList = sessionStorage.storyList
        ? JSON.parse(sessionStorage.storyList)
        : [];
      let catoonList = localStorage.catoonList
        ? JSON.parse(localStorage.catoonList)
        : [];

      let resultsto = catoonList.find((c) => c.storyId == storyList.id);

      if (!resultsto) {
        this.catext = "已收藏";
        localStorage.catoonList = JSON.stringify([
          ...catoonList,
          {
            storyId: storyList.id,
            storyImg: storyList.img,
            count: storyList.count,

          },
        ]);
      } else {
        let newlist = catoonList.filter((c) => c.storyId != storyList.id);
        localStorage.catoonList = JSON.stringify(newlist);
        this.catext = "未收藏";
      }
    },
    goau() {
      this.author = JSON.parse(sessionStorage.contentList).author;
      this.count = JSON.parse(sessionStorage.getItem("count"));
      this.id = JSON.parse(sessionStorage.storyList).id;
      // console.log(this.count);
    },

    scroll(sflg) {
      this.scrollFlag = sflg;
    },
    returnroute() {
      this.$router.go(-1);
    },
    play() {
      this.flag = !this.flag;
      console.log(this.flag);
      this.$nextTick(() => {
        if (this.flag == true) {
          this.text = "暂停";
          this.$refs.audio[0].play();
        } else {
          this.text = "播放";
          this.$refs.audio[0].pause();
        }
      });
    },
    display() {
      this.show = !this.show;
    },

    nightchange() {
      this.night = !this.night;
      this.isblack = !this.isblack;
      console.log(this.content);
    },
  },
};
</script>

<style lang="scss">
.black {
  pointer-events: auto;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    pointer-events: none;
    background-color: rgb(105, 98, 98, 0.5);
  }
}

.content-item {
  .bg {
    position: relative;
    width: 100vw;
    height: 100vh;
    color: #fff;
    z-index: 100;

    .author {
      position: absolute;
      top: 15%;
      left: 50%;
      transform: translateX(-50%);
      //   color: #fff;
      font-size: 14px;
    }

    .bg-top {
      background-color: rgba(118, 102, 102, 0.5);

      position: fixed;
      width: 100vw;
      height: 80px;
      z-index: 999;

      .returnroute {
        position: absolute;
        top: 30px;
        left: 30px;
        display: inline-block;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 25px;
        font-size: 28px;
        background-color: #fff;
        color: rgb(192, 107, 107);
        border-radius: 999px;

        &.active {
          background-color: black;
          color: rgb(235, 207, 207);
        }
      }

      .title {
        position: absolute;
        top: 37px;
        text-align: center;
        color: black;
        line-height: 20px;
        font-size: 10px;
        left: 70px;
        width: 70px;
        height: 20px;
        border-radius: 30px;
        background-color: #fff;
        &.active {
          background-color: black;
          color: rgb(235, 207, 207);
        }
      }

      .mulu {
        position: absolute;
        top: 37px;
        right: 120px;
        height: 20px;
        //   color: white;
      }
      .bgaudio {
        position: absolute;
        top: 37px;
        right: 80px;
        height: 20px;
        //   color: white;
      }

      .control {
        position: absolute;
        top: 10px;
        right: 0px;
        font-size: 25px;
        transition: right 0.3 linear;

        &.anmiadrop {
          transform: all 0.3 linear;
          right: 70px;
        }
      }
      .seting {
        position: absolute;
        top: 20%;
        right: 1%;
        font-size: 12px;
        height: 60px;
      }
      .night,
      .catoon {
        height: 25px;
        width: 60px;
        border-bottom: 1px solid #000;
        // margin-top: 10px;
        line-height: 20px;
        text-align: center;
        background-color: rgb(100, 86, 86);
      }
    }

    img {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    .scroll-enter,
    .scroll-leave-to {
      transform: translateY(-100%);
    }

    .scroll-enter-active,
    .scroll-leave-active {
      transition: all 0.3s linear;
    }

    .scroll-enter-to,
    .scroll-leave {
      transform: translateX(0);
    }
    .drop-enter,
    .drop-leave-to {
      transform: translateX(100%);
    }

    .drop-enter-active,
    .drop-leave-active {
      transition: all 0.3s linear;
    }

    .drop-enter-to,
    .drop-leave {
      transform: translateX(0);
    }
  }
}
</style>